<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> Class+Transition控制 动画Show与Hide</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript">
			
		</script>
		
		<style type="text/css">
			body, div{
				margin: 0;
				padding: 0;
			}
			
			body{
				position: relative;
			}
			#div1{
				border-radius: 10px;
				position: absolute;
			}
			
			div{
				background-color: #f00;
				margin: 30px;
			}
			
			.heart {
			      width: 100px;
			      height: 100px;
			      position: relative;
			      background-color: #f00;
			      transform: rotate(45deg);
			    }
			    .heart::before,
			    .heart::after {
			      position: absolute;
			      content: '';
			      background-color: #f00;
			      top: 0px;
			      left: -50%;
			      width: 100%;
			      height: 100%;
			      border-radius: 50%;
			    }
			
			    .heart::after {
			      left: 0;
			      top: -50%;
			    }

			
			
			/* 起始状态 */
			/* .in{
				width:80%;
				height: 200px;
				
				transition: all 1.5s linear;
			} */
			
			/* 终止状态 */
			/* .fade{
				width:0;
				height: 0;
			} */
			
			/* 起始状态 */
			.inCenter{
				width:80%;
				height: 200px;
				opacity: 1;
				
				left: 0;
				top: 0;
				transition: all 1.5s linear;
			}
			
			/* 终止状态 */
			.fadeCenter{
				width: 0;
				height: 0;
				opacity: 0;
				
				left: 40%;
				top: 100px;
				
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="Action" />
		<div id="div1" class="inCenter">
		</div>
	
		
		<script type="text/javascript">
			// 1. Class+Transition 实现 show和hide ==>is else 
					// 1.1) 定义起始class 
					// 1.2) 定义终止class 
					// 1.3) 在起始class 的内部, 设定transition 
					// 1.4) 把其实class 放到 target 上
					// 1.5) 调用toggleClass(终止class)
			$(function(){
				$('#btn').click(function(e){
					var $div1 = $('#div1');
					$div1.one('transitionend', function(){
						console.log('transitionend!');
					});
						
					$div1.toggleClass('fadeCenter');
				});
				
				

			});
			
		</script>
	</body>
</html>
